<template>
  <div class="todoWrapper">
    <h1>ToDoList</h1>
    
    <!-- 头部组件用于输入 -->
    <headers :outPutHander="outPutHander"> </headers>
    <item-list :list="arr"></item-list>
    <footers></footers>
  </div>
</template>

<script lang="ts">
import {
  defineComponent, reactive,
} from "vue";

// 组件名不能使用关键字
import headers from '@/views/components/header.vue'
import footers from '@/views/components/footer.vue'
import itemList from '@/views/components/itemList.vue'


// interface ToDo {
//   id: Number,
//   text: String,
//   isDone: Boolean
// }

export default defineComponent({
  name: "ToDo",
  components:{
    headers,footers,itemList
  },
  setup(){
    let arr : any= reactive([])


    function outPutHander(e:any) :void{
      // 将数据存储到arr中
      arr.push(e)
      
    }

    return {
      outPutHander,
      arr,
    }
  }
});
</script>

<style scoped>
.todoWrapper {
  width: 800px;
  border: 1px solid red;
  position: relative;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
</style>